<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- svg常用属性 -->
  <!-- 1.width：表示的是svg标签的宽度-->
  <!-- 2.height：表示的是svg标签的高度 -->
  <!-- 3.fill：表示的修改svg图片的颜色(省去了让ui切图这部分工作，前端可以自定义颜色) -->
  <!-- 4.viewBox：0 0 128  128 -->
  <!-- 4.1 第一个值： 表示svg图标距离原点x轴的偏移量 -->
  <!-- 4.2 第二个值： 表示svg图标距离原点y轴的偏移量 -->
  <!-- 4.3 第三个值： 以x轴偏移量为开始点  截取对应的长度 -->
  <!-- 4.4 第四个值： 以y轴偏移量为开始点  截取对应的长度 -->
  <!-- 4.5作用：根据四个属性 截取最终的图标之后 把整个截取的图标放大到svg对应的宽高上 -->
  <!-- width="128" height="128" -->
  <svg width="500" height="500" fill="red" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><path d="M96.258 57.462h31.421C124.794 27.323 100.426 2.956 70.287.07v31.422a32.856 32.856 0 0 1 25.971 25.97zm-38.796-25.97V.07C27.323 2.956 2.956 27.323.07 57.462h31.422a32.856 32.856 0 0 1 25.97-25.97zm12.825 64.766v31.421c30.46-2.885 54.507-27.253 57.713-57.712H96.579c-2.886 13.466-13.146 23.726-26.292 26.291zM31.492 70.287H.07c2.886 30.46 27.253 54.507 57.713 57.713V96.579c-13.466-2.886-23.726-13.146-26.291-26.292z"/></svg>
</body>
</html>